<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>详情页面</title>
    <!--<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"-->
          <!--integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"-->
          <!--crossorigin="anonymous" />-->
    <link rel="stylesheet" href="style/css/common.css?v=0.14" />
    <link rel="stylesheet" href="style/css/search.css?v=0.15" />
    <link rel="stylesheet" href="style/css/detail.css?v=0.25" />

    <!--<script src="https://cdn.bootcss.com/jquery/2.1.3/jquery.js"></script>-->
    <script src="js/jquery-1.11.3.min.js"></script>
    <script src="js/settings.js?v=0.05"></script>
    <script src="js/oil.js?v=0.24"></script>
</head>
<body>

    <div class="search">
        <div id="mask" class="mask">
            <div class="loading">
                <img src="images/loading.gif" alt="" />
            </div>
            <div class="gray"></div>

        </div>
        <!--<div class="blank-20"></div>-->
        <div class="blank-10"></div>
        <div class="title">
            <img src="images/search-title.png" alt="" />
        </div>
        <div class="detail">
            <div id='title' class="info-title">
                <!--奥迪A6L 2012款 50 TFSI quattro 豪华型-->
            </div>
            <ul class="info" style="display:none">
                <li>
                    <div class="key">主机厂</div>
                    <div id="factory_name" class="value"></div>
                    <div class="clear"></div>
                </li>

                <li>
                    <div class="key">车系</div>
                    <div id="model_name" class="value"></div>
                    <div class="clear"></div>
                </li>

                <li>
                    <div class="key">车型</div>
                    <div id="label" class="value"></div><div class="clear"></div>
                </li>

                <!--
                <li >
                    <div class="key">发动机描述</div>
                    <div id="engine" class="value"></div><div class="clear"></div>
                </li>

                <li style="border:none">
                    <div class="key">年款</div>
                    <div id="year" class="value"></div><div class="clear"></div>
                </li>
                -->

            </ul>

            <ul class="info" style="width:100%">

                <li id="extra-data" style="display:none">
                    <div class="key">选择车型</div>
                    <div  class="value">
                        <select name="" id="model-select" style="height:2rem; padding:0 10px">
                            <option value="">2013 手自一体</option>
                        </select>
                    </div>
                    <div class="clear"></div>
                </li>

                <li >
                    <div class="key">发动机描述</div>
                    <div id="engine" class="value"></div><div class="clear"></div>
                </li>

                <li >
                    <div class="key">年款</div>
                    <div id="year" class="value"></div><div class="clear"></div>
                </li>
                <li>
                    <div class="key">变速器描述</div>
                    <div id="gearbox_type" class="value"></div>
                    <div class="clear"></div>
                </li>
                <li>
                    <div class="key">档位数</div>
                    <div id="gearbox_lv" class="value"></div>
                    <div class="clear"></div>
                </li>
                <li>
                    <div class="key">建议使用油品</div>
                    <div id="oil" class="value"></div><div class="clear"></div>
                </li>
                <li>
                    <div class="key">原厂初装量</div>
                    <div id="oil_regional" class="value"></div><div class="clear"></div>
                </li>
                <li style="border:none">
                    <div class="key">循环机更换量</div>
                    <div id="oil_change" class="value"></div><div class="clear"></div>
                </li>
            </ul>
            <div class="clear"></div>
            <div class="oil">
                <div class="nav">
                    <a class="item current">
                        <span>发动机油推荐</span>
                    </a>
                    <a class="item">
                        <span>变速箱油推荐</span>
                    </a>
                    <a class="item">
                        <span>附属油品推荐</span>
                    </a>
                </div>
                <div class="nav-content">
                    <div class="item current">
                        <div class="item-oil">
                            <div class="img">
                                <img src="images/cizhi.png" alt="" />
                            </div>
                            <div class="name">
                                磁脂全合成 <br/>
                                SN OW-40 5W-40 10W-40
                            </div>
                        </div>
                        <a href="http://m.gesite.com.cn/html/products/qyjyou/" class="detail-btn">
                            点击查看全系产品
                        </a>
                        <!--
                        <div class="item-oil">
                            <div class="img">
                                <img src="images/cizhi.png" alt="" />
                            </div>
                            <div class="name">
                                磁脂路霸王 CL4
                            </div>
                        </div>
                        <a href="#" class="detail-btn">
                            点击查看全系产品
                        </a>
                        -->
                    </div>
                    <div class="item">
                        <div class="item-oil">
                            <div class="img">
                                <img id='oil_img_url' src="#" alt="" />
                            </div>
                            <div id='oil-name' class="name"></div>
                        </div>
                        <a id='oil-link' href="#" class="detail-btn">
                            点击查看详情
                        </a>
                    </div>
                    <div class="item">
                        <!--
                        <div class="item-oil">
                            <div class="img">
                                <img src="images/fangdongye.png" alt="" />
                            </div>
                            <div class="name">
                                防冻液 CL4
                            </div>
                        </div>
                        <a href="#" class="detail-btn">
                            点击查看全系产品
                        </a>
                        -->
                        <a class="fangdongye" href="#">
                            <img src="images/fangdongye_field.png" alt="" />
                        </a>
                        <div class="tail">
                            <img src="images/tail.png" alt="" />
                        </div>

                        <div class="advertisement">
                            <img src="images/ad.jpg" alt="" />
                            <div class="article">
                                <p class="title">主要性能：</p>
                                <p>具有防冻、防沸、防腐、防锈、防垢、防菌六重防护功能。</p>
                                <p>有效抑制泡沫产生，不会降低防冻液与发动机部件之间的换热性能。</p>
                                <p>高温下有效保护铝、铜、铸铁、锡等合金，抑制腐蚀和锈蚀，确保良好的导热性。</p>
                                <p>对橡胶材料及密封件有良好的共容性，不会引起胶质部件发胀。</p>
                                <p>产品性能在使用过程中消耗量低，使用寿命长。</p>
                                <p class="title">用途：</p>
                                <p>本产品适用于各种轿车、微型汽车、轻型汽车、中型汽车和重型汽车等机动车辆发动机冷却系统的冷却、防冻和防锈。</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>


        </div>
    </div>
    <script>
        // todo 遮罩层布局

        var clientHeight = document.body.clientHeight + 40;
//        var clientHeight = document.body.offsetHeight;
//        var clientHeight = $('body');
        console.log( clientHeight );
        $('#mask .gray').css( { 'height':clientHeight + 'px'} );
        $('#mask .loading').css({ 'margin-top': ( clientHeight / 2 - 48 ) + 'px' });
    </script>
    <script>
        function oil_card(){
            $('.nav a').click(function(){
                var index = $(this).index();

                $('.nav a').removeClass('current');
                $(this).addClass('current');

                $('.nav-content .item').removeClass('current');
                console.log( $('.nav-content .item').eq(index));
                $('.nav-content .item').eq(index).addClass('current');
            });
        }
        oil_card();
    </script>
    <script>
        objectInfo();
    </script>
</body>
</html>